import { Square } from "../Square";
import { IViewer } from "../Type";
import $ from "jquery";
import { squareSize } from "./config/squareSize";

export class SquareShowPage implements IViewer {
  private dom?: JQuery<HTMLElement>;
  private isRemove: boolean = false;
  constructor(private _square: Square, private _container: JQuery<HTMLElement>) {}

  show() {
    if (this.isRemove) {
      return;
    }

    if (!this.dom) {
      this.dom = $("<div>")
        .css({
          width: squareSize.width,
          height: squareSize.height,
          backgroundColor: this._square.color,
          border: `1px solid ${squareSize.borderColor}`,
          position: "absolute",
        })
        .appendTo(this._container);
    }

    this.dom.css({
      left: this._square.point.x * squareSize.width,
      top: this._square.point.y * squareSize.height,
    });
  }
  remove() {
    if (!this.dom) {
      return;
    }
    this.dom.remove();
    this.isRemove = true;
  }
}
